<template>
  <Component
    ref="refComponent"
    v-bind="{
      ...attrs,
      ...pickOwnForBasicComponent(mappingProps, Component.props, attrs),
    }"
    :class="['tr-edit-table', styles.module]"
    v-show="mappingProps.visible"
    :rowsPerPageLabel="
      mappingProps.rowsPerPageLabel || $q.lang?.ttable.rowsPerPageLabel
    "
    :paginationLabel="mappingProps.paginationLabel || getPaginationLabel"
  >
    <template v-slot:body="props">
      <tr :props="props">
        <td
          v-for="(item, index) in mappingProps.columns"
          :key="item.name"
          :props="props"
        >
          <t-input
            v-if="item.name === 'name'"
            v-model="props.row[item.name]"
            class="tr-input-form"
            :hideLabel="true"
          />
          <t-input-number
            :hideLabel="true"
            v-else-if="item.name === 'calories'"
            v-model="props.row[item.name]"
          />
          <span v-else>{{ props.row[item.name] }}</span>
        </td>
      </tr>
    </template>
  </Component>
</template>
<script>
import Component from '@teld/q-components/Table';
import useMappingProps from 't/common/hooks/useMappingProps';
import {
  commonProps,
  fixNameSpace,
  pickOwnForBasicComponent,
} from 't/common/utils';
import { defineComponent, onMounted, ref } from 'vue';
import styles from './index.module.scss';
import './index.scss';

import _ from 'lodash';
import { useQuasar } from '@teld/q-components';

export default defineComponent({
  name: 'TEditTable',
  props: {
    ...commonProps,
    ...Component.props,
    demo: {
      type: String,
      default() {
        return '';
      },
    },
  },
  emits: [],
  components: { Component, Td, Tr },
  setup(props, { attrs, emit, expose, slots }) {
    const refComponent = ref();
    const [mappingProps, mappingExpose] = useMappingProps(props, {
      scrollTo() {
        return refComponent.value.scrollTo();
      },
      requestServerInteraction() {
        return refComponent.value.requestServerInteraction();
      },
    });
    let $q = useQuasar();

    expose(mappingExpose);

    onMounted(() => {});

    const paginationLabelCompiled = _.template($q.lang?.ttable.paginationLabel);
    const getPaginationLabel = (
      firstRowIndex,
      endRowIndex,
      totalRowsNumber,
    ) => {
      return paginationLabelCompiled({
        firstRowIndex,
        endRowIndex,
        totalRowsNumber,
      });
    };

    return {
      attrs,
      refComponent,
      styles,
      mappingProps,
      getPaginationLabel,
      pickOwnForBasicComponent,
      Component,
    };
  },
});
</script>
